<script setup lang="ts">
import PageSkeleton from '@/pages/index/components/PageSkeleton.vue'
import CustomNavbar from '@/pages/index/components/CustomNavbar.vue'
import CategoryPanel from '@/pages/index/components/CategoryPanel.vue'
import HotPanel from '@/pages/index/components/HotPanel.vue'
import { ref } from 'vue'
import { useHomeApi } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app';
import type { BannerItem, CategoryItem, HotItem } from '@/types/home';
import { useGuessRefresh } from '@/composables'

// 导航栏模块
const bannerList = ref<BannerItem[]>([])
const homeApi = useHomeApi()
const getHomeBannerData = async () => {
  const res = await homeApi.getBanner(1)
  bannerList.value = res.result
}

// 类目信息菜单
const categoryList = ref<CategoryItem[]>([])
const getCategoryData = async () => {
  const res = await homeApi.getCategory()
  categoryList.value = res.result
}

// 推荐模块
const hotPanelList = ref<HotItem[]>([])
const getHotPanelData = async () => {
  const res = await homeApi.getHotPanel()
  hotPanelList.value = res.result
}

// 猜你喜欢模块
const {guessRef,onScrollToLower} = useGuessRefresh()

// 首页全局模块
// 动画参数
const isTriggered = ref(false)
// 下拉刷新
const onRefresh = async () => {
  isTriggered.value = true
  // 刷新猜你喜欢模块
  guessRef.value?.refreshData()
  // 同时刷新四个模块的数据
  await Promise.all([
    getHomeBannerData(),
    getCategoryData(),
    getHotPanelData(),
    guessRef.value?.getMore()
  ])
  isTriggered.value = false
}

onLoad(async () => {
  await onRefresh()
})
</script>

<template>
  <!-- 导航栏 -->
  <CustomNavbar></CustomNavbar>
  <PageSkeleton v-if="isTriggered" style="overflow: scroll;height:80%;"></PageSkeleton>
  <scroll-view v-else refresher-enabled :refresher-triggered="isTriggered" @refresherrefresh="onRefresh"
    @scrolltolower="onScrollToLower" class="scrollView" scroll-y>
    <!-- 自定义轮播图-Ua开头 -->
    <UaSwaper :list=bannerList></UaSwaper>
    <!-- 分类按钮菜单 -->
    <CategoryPanel :list="categoryList"></CategoryPanel>
    <!-- 热门推荐 -->
    <HotPanel :list="hotPanelList"></HotPanel>
    <!-- 猜你喜欢-Ua开头 -->
    <UaGuess ref="guessRef"></UaGuess>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-flow: column wrap;
}

.scrollView {
  flex: 1;
}
</style>
